<template>
  <div :style="`width: 100%; height: 99vh; background: url('/8.gif') no-repeat center center; background-size: cover;`" class="container">
    <dv-border-box11 title="智慧大棚实时监测" :iitle-width="400" :animate="false">
      <!-- 大棚选择模态框 -->
      <GreenhouseSelector 
        :visible="showGreenhouseSelector" 
        :current-greenhouse-id="currentGreenhouseId"
        @close="showGreenhouseSelector = false"
        @select="handleGreenhouseSelect"
      />
      
      <div class="columns">
        <!-- 左侧列 -->
        <div class="left-column">
          <dv-border-box10>
            <House :greenhouse-id="currentGreenhouseId" />
          </dv-border-box10>
          <dv-border-box10>
            <Soil />
          </dv-border-box10>
          <dv-border-box10>
            <div class="air" style="display: flex;">
              <Air_temp />
              <Air_water />
            </div>
          </dv-border-box10>
          <dv-border-box10>
            <div class="air" style="display: flex;">
              <Soil_temp />
              <Soil_water />
            </div>
          </dv-border-box10>

        </div>

        <!-- 中间列 -->
        <div class="center-column">
          <div class="button-container">
            <button @click="goToHistory" class="history-button">查看历史截图</button>
            <button @click="selectGreenhouse" class="history-button">选择大棚</button>
            <button @click="capture" class="history-button">抓拍图像</button>
          </div>

          <dv-border-box10 >
             <Camera />
          </dv-border-box10>
          <dv-border-box10>
            <DataTable />
          </dv-border-box10>
        </div>

        <!-- 右侧列 -->
        <div class="right-column">
          <dv-border-box10>
            <Weather />
          </dv-border-box10>
          <dv-border-box10>
            <AirData />
          </dv-border-box10>
          <dv-border-box10>
            <NLKData />
          </dv-border-box10>
        </div>
      </div>
    </dv-border-box11>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { BorderBox11 as DvBorderBox11 } from '@kjgl77/datav-vue3';
import Camera from "@/components/Camera.vue";
import Air_temp from "@/components/Air_temp.vue";
import Air_water from "@/components/Air_water.vue";
import Soil_temp from "@/components/Soil_temp.vue";
import Soil_water from "@/components/Soil_water.vue";
import House from "@/components/House.vue";
import Soil from "@/components/Soil.vue";
import Weather from "@/components/Weather.vue";
import AirData from "@/components/AirData.vue";
import NLKData from "@/components/NLKData.vue";
import DataTable from "@/components/DataTable.vue";
import GreenhouseSelector from "@/components/GreenhouseSelector.vue";
import { useRouter } from 'vue-router';
import axios from "axios";
import { useStore } from '@/store/index.js';

const router = useRouter();
const showGreenhouseSelector = ref(false);
const currentGreenhouseId = ref(1);
const currentGreenhouse = ref('1号温室');

const goToHistory = () => {
  router.push({ name: 'HistoryImg' });
};

const selectGreenhouse = () => {
  // 打开大棚选择模态框
  showGreenhouseSelector.value = true;
};

const handleGreenhouseSelect = (greenhouse) => {
  currentGreenhouseId.value = greenhouse.id;
  currentGreenhouse.value = greenhouse.name;
  
  // 显示切换成功提示
  console.log(`已切换到${greenhouse.name}`);
  
  // 这里可以添加刷新数据的逻辑
  // 例如：重新获取选中大棚的传感器数据
  // refreshSensorData(greenhouse.id);
  
  // 可以使用一个更美观的提示，而不是alert
  showSuccessNotification(`已切换到${greenhouse.name}`);
};

const showSuccessNotification = (message) => {
  // 创建一个临时的提示元素
  const notification = document.createElement('div');
  notification.textContent = message;
  notification.style.cssText = `
    position: fixed;
    top: 80px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(90deg, #2990ff, #3480ee);
    color: white;
    padding: 15px 30px;
    border-radius: 8px;
    font-size: 16px;
    font-weight: bold;
    box-shadow: 0 4px 20px rgba(41, 144, 255, 0.6);
    z-index: 10000;
    animation: slideDown 0.3s ease;
  `;
  
  document.body.appendChild(notification);
  
  // 3秒后移除
  setTimeout(() => {
    notification.style.animation = 'slideUp 0.3s ease';
    setTimeout(() => {
      document.body.removeChild(notification);
    }, 300);
  }, 3000);
};

const capture = async () => {
  const userStore = useStore();
  const token = userStore.token;

  try {
    const response = await axios.post('/api/camera_data/catch_img', {
      headers: {
        Authorization: `Bearer ${token}`,
      },
    });

    // 检查响应状态码
    if (response.status === 200) {
      console.log('抓拍成功');
      showSuccessNotification('抓拍成功');
    } else {
      console.error('抓拍失败，状态码:', response.status);
      alert('抓拍失败，请重试');
    }
  } catch (error) {
    // 捕获请求错误
    console.error('请求失败:', error);
  }
};
</script>

<style scoped>
/* 主容器：背景设置 */
.container {
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 包裹列的父容器 */
.columns {
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 100%;
}

/* 左侧列样式 */
.left-column {
  flex: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  margin-top: 3vw;
  margin-left: 2vw;
  margin-bottom: 1vw;
  background-color: rgba(0, 0, 0, 0.1);
}

/* 中间列样式 */
.center-column {
  flex: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  margin-top: 5vw;
  margin-left: 1vw;
  margin-right: 1vw;
  margin-bottom: 1vw;
  background-color: rgba(0, 0, 0, 0.1);
}

/* 右侧列样式 */
.right-column {
  flex: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  margin-top: 3vw;
  margin-right: 2vw;
  margin-bottom: 1vw;
  background-color: rgba(0, 0, 0, 0.1);
}
/* 按钮容器样式：将按钮水平排列 */
.button-container {
  display: flex;
  justify-content: space-between;
  width: 100%;  /* 确保按钮在可用宽度内排列 */
  margin-bottom: 20px;  /* 按钮和下面内容的间距 */
}
/* 按钮样式 */
.history-button {
  padding: 10px 20px;
  background-color: #3480ee;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 16px;
  margin: 0 10px; /* 设置左右间距，防止按钮过于紧凑 */
  flex: 1; /* 按钮按比例分配空间 */
  text-align: center;  /* 按钮内容居中 */
  max-width: 160px; /* 最大宽度，确保按钮不会过大 */
}

.history-button:hover {
  background-color: #1993c7;
}

/* 通知动画 */
@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

@keyframes slideUp {
  from {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
  to {
    opacity: 0;
    transform: translateX(-50%) translateY(-20px);
  }
}
</style>
